import 'package:flutter/material.dart';
import 'package:scene_transition/datas.dart';
import 'package:scene_transition/layout_item.dart';

import 'layout_item.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scene Transition',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Scene Transition'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final count = 3;

  AnimationController controller;
  List<Animation<LayoutItem>> layoutAnimations = [];

  @override
  void initState() {
    controller = AnimationController(
      duration: Duration(milliseconds: 250),
      vsync: this,
    );
    _onTapItem(null, 0);

    super.initState();
  }

  Animation<LayoutItem> buildAnimation(LayoutItem begin, LayoutItem end) {
    return LayoutItemTween(begin: begin, end: end).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOut,
    ));
  }

  void _onTapItem(BuildContext context, int index) {
    setState(() {
      controller.reset();
      List<LayoutItem> beginLayouts = layoutsAtIndex(_selectedIndex);
      List<LayoutItem> endLayouts = layoutsAtIndex(index);
      layoutAnimations = [];
      for (var i = 0; i < beginLayouts.length; i++) {
        final beginLayout = beginLayouts[i];
        final endLayout = endLayouts[i];
        layoutAnimations.add(buildAnimation(beginLayout, endLayout));
      }
      controller.forward();

      _selectedIndex = index;
    });
  }

  List<LayoutItem> layoutsAtIndex(int index) {
    return layoutStyles[index];
  }

  List<Widget> buildItemWidgets(List<LayoutItem> layouts) {
    List<Widget> list = [];
    list.add(buildItemWidget(layouts[0], 0));
    list.add(buildItemWidget(layouts[1], 1));
    return list;
  }

  Widget buildItemWidget(LayoutItem layout, int imageIndex) {
    return Positioned.fromRect(
      rect: layout.rect,
      child: Transform(
        transform: Matrix4.rotationZ(layout.rotation),
        child: Image.asset(
          imagePaths[imageIndex],
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  List<Widget> buildAnimatedItemWidgets() {
    List<Widget> list = [];
    for (var i = 0; i < layoutAnimations.length; i++) {
      Animation<LayoutItem> animation = layoutAnimations[i];
      list.add(AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return buildItemWidget(animation.value, i);
        },
      ));
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SafeArea(
        bottom: true,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Stack(
                  children: buildAnimatedItemWidgets(),
                ),
              ),
              Container(
                height: 100,
                margin: EdgeInsets.all(10),
                alignment: Alignment.center,
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: count,
                  separatorBuilder: (BuildContext context, int index) {
                    return SizedBox(
                      width: 10,
                    );
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(
                      onTap: () => this._onTapItem(context, index),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          border: Border.all(
                            color: index == _selectedIndex
                                ? Colors.red
                                : Colors.black,
                            width: 5,
                          ),
                        ),
                        width: 100,
                        height: 100,
                        child: Center(
                          child: Text(
                            '${index + 1}',
                            style: Theme.of(context).textTheme.headline2,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   onPressed: _incrementCounter,
      //   tooltip: 'Increment',
      //   child: Icon(Icons.add),
      // ),
    );
  }
}
